import { findDicByCode } from '@/support/common';
import '@ant-design/compatible/assets/index.css';
import { Button, Form, Input, message, Modal, TreeSelect } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';

const FormItem = Form.Item;
const mapStateToProps = (state: any) => ({});
const { TextArea } = Input;
class EditprivateKeyModal extends PureComponent<any, any> {
  static contextTypes = {
    dicData: PropTypes.array,
  };
  formRef = React.createRef<FormInstance>();

  constructor(props: any) {
    super(props);
    this.state = {
      submitBntLading: false,
      createType: 0,
      sid: '',
      moduleCode: '',
      secretCode: '',
      secretDesc: '',
      secretName: '',
      secretPrivate: '',
      secretPublic: '',
      tenantCode: '',
      createTypeList: [
        { value: 1, title: '自动生成' },
        { value: 2, title: '手动生成' },
      ],
      finddictList: [],
      tenantData: [],
    };
  }

  componentDidMount() {
    const { editModalData } = this.props;
    this.setState({
      sid: editModalData.sid,
      createType: editModalData.createType,
      moduleCode: editModalData.moduleCode,
      secretCode: editModalData.secretCode,
      secretDesc: editModalData.secretDesc,
      secretName: editModalData.secretName,
      secretPrivate: editModalData.secretPrivate,
      secretPublic: editModalData.secretPublic,
      tenantCode: editModalData.tenantCode,
      // createTypeList:editModalData.createTypeList,
      // finddictList:editModalData.finddictList,
      tenantData: editModalData.tenantData,
      finddictList: findDicByCode(this.context.dicData, 'seretModel').map(item => {
        const obj = {
          value: '',
          title: '',
        };
        obj.value = item.dictKey;
        obj.title = item.dictValue;
        return obj;
      }),
    });
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  submitForm = () => {
    this.formRef.current?.submit();
  };

  handleSubmit = () => {
    const { changeEditModalVisible } = this.props;
    const {
      createType,
      moduleCode,
      secretCode,
      secretDesc,
      secretName,
      secretPrivate,
      secretPublic,
      sid,
    } = this.state;
    let submitData = {
      createType,
      moduleCode,
      secretCode,
      secretDesc,
      secretName,
      secretPrivate,
      secretPublic,
      sid,
    };
    this.setState({
      submitBntLading: true,
    });
    this.props.dispatch({
      type: 'http/postObjWithRes',
      payload: {
        url: '/secret/edit',
        ...submitData,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          changeEditModalVisible(true);
          message.success('操作成功');
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          submitBntLading: false,
        });
      },
    });
  };

  render() {
    const { changeEditModalVisible, editModalData } = this.props;
    const { submitBntLading, createType, createTypeList, tenantData, finddictList } = this.state;

    const footer = (
      <div>
        <Button size="small" onClick={() => changeEditModalVisible(false)}>
          取消
        </Button>
        <Button size="small" loading={submitBntLading} onClick={this.submitForm} type="primary">
          确定
        </Button>
      </div>
    );
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 16 },
      },
    };
    return (
      <Modal
        style={{ top: 20 }}
        footer={footer}
        title="编辑密钥"
        visible={true}
        onCancel={() => changeEditModalVisible(false)}
      >
        <Form style={{ marginTop: 12 }} ref={this.formRef} onFinish={this.handleSubmit}>
          {/* <FormItem
            {...formItemLayout}
            initialValue={editModalData.tenantCode}
            name="tenantName"
            label="租户"
            rules={[{ required: true, message: '请选择租户' }]}
          >
            <TreeSelect
              showSearch
              filterTreeNode={(val, treeNode) => {
                return treeNode.props.title.indexOf(val) >= 0;
              }}
              treeData={tenantData}
              // value={tenantCode}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择"
              allowClear
              treeDefaultExpandAll
              disabled={true}
              onChange={value => {
                this.setState({ tenantCode: value });
              }}
            />
          </FormItem> */}
          <FormItem
            {...formItemLayout}
            label="密钥编码"
            name="secretCode"
            initialValue={editModalData.secretCode}
            rules={[{ required: true, message: '请输入密钥信息' }]}
          >
            <Input
              // value={secretCode}
              maxLength={50}
              placeholder="请输入密钥编码"
              onChange={e => {
                this.setState({
                  secretCode: e.target.value || '',
                });
              }}
            />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="密钥名称"
            name="secretName"
            initialValue={editModalData.secretName}
            rules={[{ required: true, message: '请输入密钥名称' }]}
          >
            <Input
              // value={secretName}
              maxLength={50}
              placeholder="请输入密钥名称"
              onChange={e => {
                this.setState({
                  secretName: e.target.value || '',
                });
              }}
            />
          </FormItem>

          <FormItem
            {...formItemLayout}
            initialValue={editModalData.moduleCode}
            name="moduleCode"
            label="业务模块"
            rules={[{ required: true, message: '请选择业务模块' }]}
          >
            <TreeSelect
              showSearch
              filterTreeNode={(val, treeNode) => {
                return treeNode.props.title.indexOf(val) >= 0;
              }}
              treeData={finddictList}
              // value={moduleCode}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择"
              allowClear
              treeDefaultExpandAll
              onChange={value => {
                this.setState({ moduleCode: value });
              }}
            />
          </FormItem>

          <FormItem
            {...formItemLayout}
            initialValue={editModalData.createType}
            name="createType"
            label="生成方式"
            rules={[{ required: true, message: '请选择生成方式' }]}
          >
            <TreeSelect
              showSearch
              filterTreeNode={(val, treeNode) => {
                return treeNode.props.title.indexOf(val) >= 0;
              }}
              treeData={createTypeList}
              // value={createType}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择"
              allowClear
              treeDefaultExpandAll
              disabled={true}
              onChange={value => {
                this.setState({ createType: value });
              }}
            />
          </FormItem>
          {createType === 2 ? (
            <FormItem
              {...formItemLayout}
              name="secretPublic"
              label="公钥"
              initialValue={editModalData.secretPublic}
              rules={[{ required: true, message: '请输入公钥' }]}
            >
              <TextArea
                // value={secretPublic}
                rows={4}
                placeholder="请输入公钥信息"
                style={{ height: 80, resize: 'none' }}
                onChange={e => {
                  this.setState({
                    secretPublic: e.target.value || '',
                  });
                }}
              />
            </FormItem>
          ) : null}
          {createType === 2 ? (
            <FormItem
              {...formItemLayout}
              initialValue={editModalData.secretPrivate}
              name="secretPrivate"
              label="私钥"
              rules={[{ required: true, message: '请输入私钥' }]}
            >
              <TextArea
                // value={secretPrivate}
                rows={4}
                placeholder="请输入私钥信息"
                style={{ height: 80, resize: 'none' }}
                onChange={e => {
                  this.setState({
                    secretPrivate: e.target.value || '',
                  });
                }}
              />
            </FormItem>
          ) : null}
          <FormItem
            {...formItemLayout}
            initialValue={editModalData.secretDesc}
            label="备注"
            name="secretDesc"
          >
            <Input
              // value={secretDesc}
              maxLength={50}
              placeholder="请输入备注信息"
              onChange={e => {
                this.setState({
                  secretDesc: e.target.value || '',
                });
              }}
            />
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(EditprivateKeyModal);
